<template>
  <div class="bf" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="工装报废" name="gz"></el-tab-pane>
      <el-tab-pane label="设备报废" name="device"></el-tab-pane>
    </el-tabs>
    <wh-table :tableData="tableData"
              :tableLoading="tableLoading"
              :tableHeader="tableHeader"
              @showPdf="showPdf"
              :option="option">
      <template slot-scope="props" slot="operate">
        <div>
        	<span class="caozuo_span">
	          <a @click="updateBfDetail(props.rowData,'1')&&hasRole('dump:setting:add')" v-if="props.rowData.status =='0'">报废</a>
        	</span>
        	<span class="caozuo_span">
	          <a @click="updateBfDetail(props.rowData,'2')&&hasRole('dump:setting:edit')" v-if="props.rowData.status =='0'">驳回</a>
        	</span>
        	<span class="caozuo_span">
          	<a v-if="hasRole('dump:setting:delete')" @click="updateBfDetail(props.rowData,'-1')">删除</a>
        	</span>
        </div>
      </template>
    </wh-table>
    <el-dialog :visible.sync="centerDialogVisible"
               :close-on-click-modal="clickModalHide"
               :before-close="closeDialog">
       <iframe id="iframe" :src="pdfUrl" width="100%" height="500%" ></iframe>
    </el-dialog>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import { formatDate } from '@/utils/formatDate'
  export default {
    name: 'bf',
    data() {
      return {
        centerDialogVisible: false,
        clickModalHide: false,
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        pdfUrl: "",
        option: {showOperate: false, headerCell: {background: 'rgb(214, 215, 216)', color: 'rgba(0, 0, 0, 0.8)'}},
        activeName: "gz"
      }
    },
    components: {
      whTable
    },
    mounted() {
      this.getBfGzList();
    },
    methods: {
      //关闭弹窗
      closeDialog() {
        this.centerDialogVisible = false;
      },

      handleDefaultTab() {
        let self = this;
        if (this.activeName == "device") {
          self.tableHeader = [{"columnName": "name", "coloumNameCn": "设备名称"},
            {"columnName": "assetCode", "coloumNameCn": "资产编码"},
            {"columnName": "deviceCode", "coloumNameCn": "设备编码"},
            {"columnName": "bfReason", "coloumNameCn": "报废理由"},
            {"columnName": "filePath", "coloumNameCn": "文件", "type": "file"},
            {"columnName": "statusCn", "coloumNameCn": "状态"},
            {"columnName": "createTime", "coloumNameCn": "创建时间"}];
        } else {
          self.tableHeader = [
            {"columnName": "gqName", "coloumNameCn": "工区"},
            {"columnName": "gzName", "coloumNameCn": "工装名称"},
            {"columnName": "gzCode", "coloumNameCn": "工装编码"},
            {"columnName": "kuWeiCode", "coloumNameCn": "库位号"},
            {"columnName": "bfReason", "coloumNameCn": "报废理由"},
            {"columnName": "filePath", "coloumNameCn": "文件", "type": "file","width":60},
            {"columnName": "statusCn", "coloumNameCn": "状态"},
            {"columnName": "createTime", "coloumNameCn": "申请日期"}];
        }
        self.option.showOperate = true;
      },
      handleClick(tab, event) {
        this.activeName = tab.name;
        this.getBfGzList();
      },

      showPdf(data) {
        let self = this;
        self.$http({
          url: "/autoMonitor/bf/getFileBase",
          method: "post",
          params: {filePath: data}
        }).then(resp => {
          if (resp.success) {
            self.centerDialogVisible = true;
            self.pdfUrl = "data:application/pdf;base64," + resp.result;
          }
        });

      },

      getBfGzList() {
        let self = this;
        self.tableLoading = true;
        let type = this.activeName == 'gz' ? '0' : '1';
        self.handleDefaultTab();
        self.$http({
          url: "/autoMonitor/bf/queryBfList",
          method: "post",
          params: {type: type}
        }).then(resp => {
          if (resp.success) {
            self.tableLoading = false;
            for(let data of resp.result){
              data.createTime = formatDate(new Date(data.createTime),"yyyy-MM-dd hh:mm:ss");;
            }
            self.tableData = resp.result;
          }
        });
      },

      updateBfDetail(rowData, type) {
        let self = this;
        let msg = type == '1' ? '报废' :(type == '2'?'驳回': '删除') ;
        let param = {id: rowData.id,relateId:rowData.relateId};
        type != '-1' ? param.status = type : param.deleteStatus = type;
        let dataType = self.activeName == 'gz' ? '0' : '1';
        param.type = dataType;
        self.$confirm('确定' + msg + '该条记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/bf/updateDumpStatus",
            method: "post",
            params: param,
          }).then(resp => {
            if (resp.success) {
              self.getBfGzList();
              self.$notify({
                title: '提示',
                message: msg + "成功！",
                type: 'success'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style>
  .bf .el-dialog__header{
    display: none;
  }
  .bf .el-dialog__body{
    padding: 0px 0px;
    height: 100px;
  }
  .bf .el-date-editor.el-input, .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .bf .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 14px;
    border-radius: 4px;
  }
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    outline: 0;
    /*-webkit-overflow-scrolling: touch;*/
    background-color: rgb(0, 0, 0);
    filter: alpha(opacity=60);
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1999;
  }
  .bf .el-tabs__item{
  	border: 0px !important;
    height: 26px !important;
    line-height: 26px !important;
    width: 120px;
    text-align: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
  .bf .el-tabs__header {
    margin: 0;
  }
  .bf .el-tabs__item.is-active {
    color: #34bfc6 !important;
    height: 33px !important;
    line-height: 33px !important;
    border: 1px solid #34bfc6 !important;
    border-bottom-color: #fff !important;   
    box-shadow: 0px -5px 6px -5px #000;
  }
  .bf .el-tabs--card>.el-tabs__header .el-tabs__nav {
  	border: 0px;
    margin-top: 3px;
  }
  .bf .el-tabs--card>.el-tabs__header .el-tabs__item:first-child {
  	border-left: 1px;
  }
  .bf .el-tabs--card>.el-tabs__header {
    border-bottom: 1px solid #34bfc6;
  }
</style>
